<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>My web content scraper</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
		{% block stylesheets %}
			<link href="{{ asset('css/main.css') }}" rel="stylesheet"/>
		{% endblock %}
	</head>
	<body>
		{% block body %}
			<div class="container">
				{% block content %}
					<div class="row">
						<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 pt-3 pb-2">
							<form>
								<div class="form-group">
									<input id="url" class="form-control form-control-lg rounded-lg" type="url" placeholder="Site URL">
								</div>
								<div class="form-group text-center">
									<button id="look4" class="btn btn-primary rounded-0" type="button" data-role="ajax" data-url="{{ path('scrap') }}" data-text="Look for" data-text-loading="Look for" data-fields='[{"name": "url", "selector": "#url"},{"name": "category", "selector": ".category:checked"}]' data-target="#markdown">
										{{ include('icon.html.twig', {'icon': 'send'}) }}
										{{ include('spinner.html.twig') }}
										<span>Look for</span>
									</button>
									<button class="btn btn-danger rounded-0" type="button" data-role="clear" data-target="#url">
										{{ include('icon.html.twig', {'icon': 'delete'}) }}
										<span>Clear</span>
									</button>
								</div>
							</form>
						</div>
					</div>
					<div class="row">
						<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 pt-3 pb-5">
							<form>
								<div class="card mb-5">
									<div class="card-body">
										<h5 class="card-title">Taxonomies will help to categorized your content.</h5>
										<p class="card-text">ALL categorize the first that match.</p>
										<div
											class="form-group">
											{# set all_badges = "" #}
											{% set options %}
											{% for category, tags in taxonomies %}
												{% set badges %}
												{% if tags|length > 0 %}
													<table class="table">
														{% for tag in tags %}
															<tr>
																<td style="width: 90%">{{ tag }}</td>
																<td style="width: 5%">{{ include('icon.html.twig', {'icon': 'edit', 'height': 16, 'width': 16}) }}</td>
																<td style="width: 5%">{{ include('icon.html.twig', {'icon': 'trash', 'height': 16, 'width': 16}) }}</td>
															</tr>
														{% endfor %}
													</table>
												{% endif %}
												{% endset %}
												{# set all_badges = all_badges|default('') ~ badges #}
												<div class="custom-control custom-radio custom-control-inline">
													<input type="radio" id="{{ category }}" name="category" class="category custom-control-input" value="{{ category }}" data-tags="{{ badges|trim|escape }}">
													<label class="custom-control-label" for="{{category}}" style="cursor: pointer">{{ category }}</label>&nbsp;

												</div>
											{% endfor %}
											{% endset %}
											<div class="custom-control custom-radio custom-control-inline">
												<input type="radio" id="all" name="category" class="category custom-control-input" checked="checked" value="ALL">
												<label class="custom-control-label" for="all" style="cursor: pointer">all</label>
											</div>
											{{ options }}
											{{ include('taxonomies.html.twig', {'taxonomies': taxonomies}) }}
										</div>
									</div>
									<div class="card-footer">
										<span class="float-left" data-toggle="modal" data-target="#exampleModalCenter" style="cursor: pointer">{{ include('icon.html.twig', {'icon': 'edit', 'height': 32, 'width': 32, 'classes': 'text-warning'}) }}</span>
										<span class="float-right" style="cursor: pointer">{{ include('icon.html.twig', {'icon': 'trash', 'height': 32, 'width': 32, 'classes': 'text-danger'}) }}</span>
									</div>
								</div>
								<div class="form-group">
									<textarea id="markdown" class="form-control" rows="15" data-call-funcs="afterMarkdownChange" placeholder=""></textarea>
								</div>
								<div class="form-group text-center">
									<button id="save" type="button" class="btn btn-success rounded-0" data-role="ajax" data-url="{{ path('save_markdown') }}" data-text="Save" data-text-loading="Save" data-fields='[{"name": "markdown", "selector": "#markdown"}]'>
										{{ include('icon.html.twig', {'icon': 'save'}) }}
										{{ include('spinner.html.twig') }}
										<span>Save</span>
									</button>
								</div>
							</form>
						</div>
					</div>
					<div class="row">
						<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 pt-3 pb-5">
							<div id="error"></div>
						</div>
					</div>
				{% endblock %}
			</div>
		{% endblock %}
		<script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
		<script src="{{ asset('js/popper.min.js') }}" type="text/javascript"></script>
		<script src="{{ asset('js/util.js') }}" type="text/javascript"></script>
		<script src="{{ asset('js/tooltip.js') }}" type="text/javascript"></script>
		<script src="{{ asset('js/popover.js') }}" type="text/javascript"></script>
		<script src="{{ asset('js/modal.js') }}" type="text/javascript"></script>
		<script src="{{ asset('js/collapse.js') }}" type="text/javascript"></script>
		{% block javascripts %}
			<script src="{{ asset('js/main.js') }}"></script>
		{% endblock %}
	</body>
</html>
